<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>简易图片slideshow</title>
		<link href="http://r.ph.126.net/css/gen/base.css?v=1303884519039" rel="stylesheet" type="text/css"></link>
		<style>
			.slider{width:800px;margin:20px auto;}
			.slider .bg,.slider .desc{position:absolute;bottom:0px;_bottom:-1px;left:0px;width:100%;height:25px;line-height:25px;}
			.slider .bg{background-color:#000;opacity:0.35;filter:alpha(opacity=35);}
			.slider .desc{padding-left:6px;color:#fff;}
			.slider .desc .sname{font-weight:bold;}
			.slider .desc:hover{text-decoration:none;}
			.slider img{display:inline;}
			.slider .slider-t,.slider .slider-b{float:left;height:315px;}
			.slider .slider-b{position:relative;width:550px;}
			.slider .slider-t li{position:relative;height:60px;padding-bottom:4px;_padding-bottom:0;}
			.slider .slider-b img{width:550px;height:315px;}
			.slider .slider-t img{margin-left:5px;width:105px;height:60px;opacity:0.35;filter:alpha(opacity=35);}
			.slider .slider-t .on img{opacity:1;filter:alpha(opacity=100);box-shadow:0px 0px 6px #f00;}
			.slider .slider-t .on span{position:absolute;top:0;left:0;display:block;width:101px;height:56px;margin-left:5px;border:2px solid #f90;}
		</style>
    </head>
    <body>
    <div class="slider" id="slider_con">
        <ol class="slider-b" id="slider_left">
	        <li><img alt="夏日小清新" src="http://imgrc.ph.126.net/J_9zcNiuykU6f6tGE_yXXw==/4228880050100908466.jpg"/></li>
	        <li style="display:none;"><img/></li>
	        <li style="display:none;"><img/></li>
	        <li style="display:none;"><img/></li>
	        <li style="display:none;"><img/></li>
        </ol>
        <ol class="slider-t" id="slider_right">
            <li class="on"><img alt="夏日小清新" src="http://imgrc.ph.126.net/UV1p4XBBqyICAVlzZBrJHA==/4228035625170776497.jpg"></li>
            <li><img alt="糖果女孩" src="http://imgrc.ph.126.net/VRiXhALmXihKUGX2oYKyGQ==/4225220875403670730.jpg"></li>
            <li><img alt="兔子梦游仙境" src="http://imgrc.ph.126.net/Dr0DlyN_Zo0QQu0nTv4o6A==/4230005950007750894.jpg"></li>
            <li><img alt="天上西藏" src="http://imgrc.ph.126.net/wbUQvBMoMwYLSQkYeEFNzQ==/4230005950007750891.jpg"></li>
            <li><img alt="优秀作业展示" src="http://imgrc.ph.126.net/xxRL61l0Bgbw23EZok0Nqw==/4226065300333802694.jpg"></li>
        </ul>
    </div>
	<script>
	    slideData = [
			{bigurl:'http://imgrc.ph.126.net/J_9zcNiuykU6f6tGE_yXXw==/4228880050100908466.jpg',title:'夏日小清新'},
			{bigurl:'http://imgrc.ph.126.net/21ImoCj1wmefwRHagboyEQ==/4225220875403670729.jpg',title:'糖果女孩'},
			{bigurl:'http://imgrc.ph.126.net/ABk_qYRjP5L7WOYIDaITGA==/4227754150194065843.jpg',title:'兔子梦游仙境'},
			{bigurl:'http://imgrc.ph.126.net/nJ4WmCsYcM23l4eXwyDwfw==/4228035625170776498.jpg',title:'天上西藏'},
			{bigurl:'http://imgrc.ph.126.net/cC6MosMTU57xJGmYXLeMnw==/4224376450473537148.jpg',title:'优秀作业展示'}];
	</script>
	<script src="lib/jquery/jquery-1.4.js"></script> 
	<script src="slideshow.js"></script> 
    </body>
</html>
